<template xmlns:el-col="http://www.w3.org/1999/html">
    <div>
            <!--客户列表-->
            <el-tabs v-model="activeName" @tab-click="paneEdit">
                <el-tab-pane :label=item.label :name=item.value v-for="(item,index) in activeValue" :key=index>
                    <div v-if="activeName == '1'">
                        <el-card class="box-card">
                            <el-row>
                                <el-button size="small" @click="status(1)">全部</el-button>
                                <el-button size="small" @click="status(2)">待添加</el-button>
                                <el-button size="small" @click="status(3)">待通过</el-button>
                                <el-button size="small" @click="status(4)">已通过</el-button>
                            </el-row>
                        </el-card>
                        <div class="interspaceH"></div>
                        <!--表格-->
                        <div>
                            <el-card class="box-card">
                                <el-row>
                                    <el-col :span="21" style="size: 100px">共{{tableData.length}}个客户</el-col>
                                    <el-col :span="3">
                                        <el-row>
                                            <el-button type="primary" @click="importVisible = true">导入客户</el-button>
<!--                                            <el-button type="primary" size="small" @click="huishou">回收设置</el-button>-->
                                        </el-row>
                                    </el-col>
                                </el-row>
                                <div class="interspaceH"></div>
                                <el-table @selection-change="tableRowChange" :data="tableData"
                                          :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%">
                                    <el-table-column
                                            prop="telephone"
                                            label="手机号">
                                    </el-table-column>
                                    <el-table-column
                                            prop="remarks"
                                            label="客户备注">
                                    </el-table-column>
                                    <el-table-column
                                            prop="createTime"
                                            label="导入时间">
                                    </el-table-column>
                                    <el-table-column
                                            prop="empName"
                                            label="分配员工">
                                    </el-table-column>
                                    <el-table-column align="center" label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" @click="bianji(scope.$index, scope.row)">
                                                编辑
                                            </el-button>
<!--                                            <el-button size="mini" type="text" @click="shanchu(scope.row.friendId)">删除
                                            </el-button>-->
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <!--分页-->
                                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                                               :current-page="pagePagination.currentPage"
                                               :page-sizes="pagePagination.pageSizes"
                                               :page-size="pagePagination.pageSize"
                                               layout="total, sizes, prev, pager, next"
                                               :total="pagePagination.total">
                                </el-pagination>
                            </el-card>
                        </div>


                    </div>

                    <div v-if="activeName == '2'">
                        <el-card class="box-card">
                            <div>数据总览</div>
                            <div class="interspaceH"></div>
                            <!--数据总览-->
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>导入总客户数</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="20">{{ Data[0].countAll }}</el-col>
<!--                                            <el-col :span="4">-->
<!--                                                <el-button type="text" @click="status(1)">详情</el-button>-->
<!--                                            </el-col>-->
                                        </el-row>
                                    </div>
                                </el-col>
<!--                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>待分配客户数</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="20">
                                                <span>
                                                    {{ Data[0].addAll }}
                                                </span>
                                            </el-col>
                                            <el-col :span="4">
                                                <el-button type="text" @click="status(2)">详情</el-button>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>-->
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>待添加客户数</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="20">
                                                <span>
                                                    {{ Data[0].adoptAll }}
                                                </span>
                                            </el-col>
<!--                                            <el-col :span="4">-->
<!--                                                <el-button type="text" @click="status(3)">详情</el-button>-->
<!--                                            </el-col>-->
                                        </el-row>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>待通过客户数</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="20">
                                                <span>
                                                    {{ Data[0].beAdoptAll }}
                                                </span>
                                            </el-col>
<!--                                            <el-col :span="4">-->
<!--                                                <el-button type="text" @click="status(4)">详情</el-button>-->
<!--                                            </el-col>-->
                                        </el-row>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>已通过客户数</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="20">
                                                <span>
                                                    {{ Data[0].distributionAll }}
                                                </span>
                                            </el-col>
<!--                                            <el-col :span="4">-->
<!--                                                <el-button type="text" @click="status(5)">详情</el-button>-->
<!--                                            </el-col>-->
                                        </el-row>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="grid-content bg-purple-dark">
                                        <el-row>总体通过率</el-row>
                                        <br/>
                                        <el-row>
                                            <el-col :span="24">
                                                <span>
                                                    {{ Data[0].passingRateAll }}
                                                </span>
                                            </el-col>
                                        </el-row>
                                    </div>
                                </el-col>
                            </el-row>
                            <br/>
                        </el-card>
                        <div class="interspaceH"></div>
                        <!--成员添加情况-->
                        <el-card class="box-card">
                            <el-row>
                                <el-col :span="22">
                                    <div style="size: 100px">成员添加情况</div>
                                </el-col>
                                <el-col :span="2">
                                    <el-button type="primary" size="small" @click="downfile">导出数据</el-button>
                                </el-col>
                            </el-row>

                            <div class="interspaceH"></div>

                            <div>
                                <el-table
                                        :data="listData"
                                        @selection-change="handleSelectionChange"
                                        stripe
                                        style="width: 100%">
                                    <el-table-column
                                            type="selection">
                                    </el-table-column>
                                    <el-table-column
                                            prop="empName"
                                            label="成员">
                                    </el-table-column>
                                    <el-table-column
                                            prop="all"
                                            label="分配客户总数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="adopt"
                                            label="待添加客户数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="beAdopt"
                                            label="待通过客户数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="distribution"
                                            label="已通过客户数">
                                    </el-table-column>
                                    <el-table-column
                                            prop="passingRate"
                                            label="添加通过率">
                                    </el-table-column>
                                </el-table>
                                <!-- 分页组件 -->
                            </div>
                        </el-card>
                    </div>
                </el-tab-pane>
            </el-tabs>

        <!--导入客户-->
        <el-dialog
                title="导入客户"
                :visible.sync="importVisible"
                width="30%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="Excel文件：" prop="file" :rules="{required: true, message: '请上传文件'}">
                    <el-upload
                            class="upload-demo"
                            ref="upload"
                            action=""
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :file-list="fileList"
                            :http-request="httpRequest"
                            :auto-upload="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    </el-upload>
                    <el-button size="small" type="text" @click="down" style="padding: 0;font-size: 14px">点击此处下载模板</el-button>
                </el-form-item>
                <el-form-item label="选择员工" prop="empId" :rules="{required: true, message: '请选择员工'}">
                    <el-select v-model="ruleForm.empId">
                        <el-option v-for="item in resource" :key="item.empId" :label="item.empName" :value="item.empId"></el-option>
                    </el-select>
<!--                        <el-button size="small" @click="empAdd">+ 添加成员</el-button><br />
                    <el-tag v-for="item in ruleForm.resource" :key="item.empId" closable style="margin-right: 5px"
                            @close="handleClose(item)">
                        {{ item.empName }}
                    </el-tag>-->
                </el-form-item>
            </el-form>
            <el-button style="margin-left: 10px;" type="primary" @click="submitUploadList">导入</el-button>
            <el-button @click="importVisible = false">取消</el-button>
        </el-dialog>
        <!--选择成员-->
        <el-dialog title="选择员工" :visible.sync="closeDialogs" width="27%" :close-on-click-modal="false">
            <el-transfer :filterable="true" filter-placeholder="请输入员工昵称" v-model="resourceArrs" :data="resource"
                         @left-check-change="leftChange" @right-check-change="rightChange"></el-transfer>
            <br/>
            <el-row>
                <el-col :span="7" :offset="17">
                    <el-button size="small" @click="quxiao">取消</el-button>
                    <el-button size="small" type="primary" @click="peoples">提交</el-button>
                </el-col>
            </el-row>
        </el-dialog>

        <!--回收设置-->
        <el-dialog title="回收设置" :visible.sync="Recovery" width="33%" @click="closeDialog">
            <el-form ref="form" :model="recoveryForm" label-width="100px">
                <el-form-item label="自动回收：">
                    <el-switch v-model="recoveryForm.value"></el-switch>
                </el-form-item>
                <el-form-item v-if="recoveryForm.value == true">
                    超过 <el-input style="width: 50px" v-model="recoveryForm.day" /> 天，客户未添加分配的员工，自动回收转移至待分配状态
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="title" @click="submit2">保存</el-button>
                    <el-button @click="closeDialog">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog :title="title" :visible.sync="update" width="30%" :close-on-click-modal="false">
            <el-form label-width="120px" :model="table" ref="editForm">
                <el-form-item label="手机号" prop="telephone">
                    <el-input v-model="table.telephone"></el-input>
                </el-form-item>
                <el-form-item label="客户备注" prop="remarks">
                    <el-input v-model="table.remarks"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" type="primary" class="title" @click="submitForm">保存
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import axios from "axios";

export default {
    // 注册组件
    components: {
        Pagination
    },
    data() {
        return {
            multipleSelection: [],
            activeName: '1',
            activeValue: [
                {
                    label: '客户列表',
                    value: '1',
                },
                {
                    label: '数据统计',
                    value: '2',
                },
            ],
            emp: [],
            tags: [],
            Data: {
                all: '123'
            },
            file: [],
            daorukehu: '导入客户',
            form: {
                biaoqian: [],
                empId: [],
            },
            importVisible: false,
            resourceArr: [],
            inputVisible: false,
            inputValue: '',
            update: false,
            title: '编辑客户信息',
            table: {},
            stripe: 'true',
            formInline: {
                page: 1,
                limit: 10,
                varLable: '',
                varName: '',
                token: localStorage.getItem('logintoken')
            },
            // 分页参数
            pageparm: {
                currentPage: 1,
                pageSize: 10,
                total: 10
            },
            pagePagination: {
                currentPage: 1,
                pageSizes: [10, 15, 20, 25],
                pageSize: 10,
                total: 0
            },
            tableData: [],

            //导入Excel
            fileList: [],
            //回收设置
            Recovery: false,
            recoveryForm: {},
            //回收设置开关
            value: false,
            //客户 表格数据
            //数据 表格数据
            listData: [],
            aaa: {
                orgId: this.$store.getters.getUserInfo.orgId,
                orgNum: this.$store.getters.getUserInfo.orgNum,
                companyId: this.$store.getters.getUserInfo.companyId
            },
            //选择员工
            closeDialogs: false,
            resourceArrs: [],//员工选择列表
            resource: [],//员工列表
            ruleForm: {
                empId: ''
            },
            activity: [],
            rules: {},
        }
    },
    mounted() {
        this.queryDataHandle(1, 10);
        let that=this
        this.$request("/api/emp/getEmpList/1_0", {}, "POST").then((data) => {
            that.resource = data.rows/*
            that.resource.forEach((item, i) => {
                that.resource[i].key = that.resource[i].empId;
                that.resource[i].label = that.resource[i].empName;
                that.resource[i].disabled = false
            })*/
        })
    },
    methods: {
        paneEdit(tab, event) {
            this.showIndex = tab.name;
        },

        //导入Excel
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },

        downfile() {

            this.$requestFile("/api/friendings/download/1_0", '', "数据统计.xlsx")
        },

        queryDataHandle(page = 1, row = 10) {
            let payload = {
                pageNum: page,
                pageSize: row
            }
            let that = this
            that.$request("/api/friendings/getByClientsStatus/1_0", payload, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })

            that.$request("/api/friendings/selectByUserName/1_0", {}, "POST").then((data) => {
                that.listData = data.rows

                that.listData.forEach((item, i) => {
                    that.listData[i].passingRate = (item.passingRate * 100) + '%'
                })
            })

            that.$request("/api/friendings/getByClient/1_0", {} , "POST").then((data) => {
                that.Data = data.rows
                that.Data.forEach((item, i) => {
                    that.Data[i].passingRateAll = (item.passingRateAll * 100) + '%'
                })
            })
        },
        submit1() {
            this.$request("/api/friendings/importFriendings/1_0", this.form.file, "POST").then((data) => {
                console.log(data)
            })
            this.closeDialog()
            this.$message('导入成功');
            //刷新页面
            this.$router.go(0);
        },
        submitForm() {
            this.$request("/api/friendings/updateById/1_0", this.table, "POST").then((data) => {

                console.log(data)
            })
            this.closeDialog()
        },
        status(item) {
            let type = ''

            if (item == 1) {
                type = ''
            } else if (item == 2) {
                type = '待添加'
            } else if (item == 3) {
                type = '待通过'
            } else if (item == 4) {
                type = '已通过'
            }
            ;
            var friendings = {
                status: type
            }
            this.activeName = '1'
            let that = this
            that.$request("/api/friendings/getByClientsStatus/1_0", friendings, "POST").then((data) => {
                that.pagePagination['total'] = data.total
                that.pagePagination['pageSize'] = data.row
                that.tableData = data.rows
            })
        },
        shanchu(item) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$request("/api/friendings/deleteById/1_0", item, "DELETE").then((data) => {
                        console.log(data)
                    })
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.queryDataHandle(this.pagePagination.currentPage, this.pagePagination.pageSize)
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        //编辑
        bianji(index, row) {
            this.update = true
            this.table = row
        },

        //回收按钮
        huishou() {
            this.Recovery = true
        },
        //导入客户确认按钮

        //取消form表单
        closeDialog() {
                this.Recovery = false,
                this.update = false
        },
        uploadSuccess() {
            this.$message.success("导入成功");
            this.$refs.uploadExcel.clearFiles()
            this.importVisible = false
            this.queryDataHandle()
        },


        //回收保存按钮
        submit2() {
            this.recoveryForm//参数

            this.$message({
                message: '保存成功',
                type: 'success'
            })
            this.Recovery = false,
            //刷新页面
            this.queryDataHandle(1, 10);
        },
        //删除

        //导入客户
        //添加员工

        handleClose(item) {
            this.ruleForm.resource.splice(this.ruleForm.resource.indexOf(item), 1);
        },
        leftChange(e) {
            let value = this.resourceArr
            let a = value.concat(e);
            this.resourceArr = a
        },
        rightChange(e) {
            let value = []
            this.resourceArr.map((item) => {
                if (item != e[0]) {
                    value.push(item)
                }
            })
            this.resourceArr = value;
        },
        //提交
        peoples() {
            let arr = this.resourceArr
            let resource = this.resource
            let result = []
            let resultId = []
            arr.map((value, index, array) => {
                resource.map((item) => {
                    if (item.key == value) {
                        result.push(item)
                        resultId.push(value)
                    }
                })
            })
            this.ruleForm.resource = result
            this.ruleForm.empId = resultId
            this.quxiao()
        },
        quxiao() {
            this.closeDialogs = false
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.form.biaoqian.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        beforeUploadHandle(file) {
            const isExcel = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            if (!isExcel) {
                this.$message.error('只能是 xls/xlsx/csv 格式!');
                return false
            }
            if (file.size > 10 * 1024 * 1024) {
                this.$message.error('文件超出10M');
                return false
            }
        },
        down() {
            this.$requestFile('/api/excel/downloadTemp/1_0?fileType=friending', "", "批量加好友导入模板.xls")
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //上传

        httpRequest(param) {
            console.log(param)
            let fileObj = param.file // 相当于input里取得的files
            let fd = new FormData()// FormData 对象
            fd.append('file', fileObj)// 文件对象
            fd.append('empId', this.ruleForm.empId)
            fd.append('orgId', this.$store.getters.getUserInfo.orgId)
            fd.append('orgNum', this.$store.getters.getUserInfo.orgNum)
            fd.append('companyId', this.$store.getters.getUserInfo.companyId)

            debugger

            let url = '/api/friendings/importFriendings/1_0'
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            axios.post(url, fd, config).then(res=>{
                if(res.status===200){
                    this.push();//提交表单
                }
            })
        },
        submitUploadList() {
            this.$refs.upload.submit();

        },
        push() {
            this.importVisible = false
            this.queryDataHandle(1, 10);
        },
        empAdd(){
            this.closeDialogs = true
        },
        handlechange(value) {
            console.log(value)
            let activityInstance = {
                activityInstanceType: value
            }
            let that = this
            //列表
            that.$request("/api/wheel/getByType/1_0", activityInstance, "POST").then((data) => {
                that.activity = data.rows
            })
        },
        tableRowChange(val) {
            if (val.length > 0) {
                this.titleCurrentPanel = true
            } else {
                this.titleCurrentPanel = false
            }
            this.multipleSelection = val;
        },

    }
}
</script>

<style scoped>
.bg-purple-dark {
    background: #cbe7f7;
    padding: 10px;
}

.grid-content {
    border-radius: 4px;
    min-height: 80px;
}
</style>
